<template>
    <div>
        <table border="1" cellspacing="0">
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>个人简介</td>
                <td>操作</td>
            </tr>
            <tr v-for="(user, index) in users" :key="index">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td>{{ user.text }}</td>
                <td><a href="javascript:;" @click="del(index)">删除</a> | <a href="javascript:;" @click="xq(index)">查看</a>
                </td>
            </tr>
        </table>
        <a href="javascript:;" @click="dels" v-if="users.length">删除所有用户</a>
        <br><br>
        请输入姓名：<input type="text" v-model="name"> <br>
        请输入年龄：<input type="text" v-model="age"> <br>
        请输入个人简介：<input type="text" v-model="text"> <br>
        <input type="button" value="提交" @click="add">
    </div>
</template>

<script>
export default {
    name: "User",
    data() {
        return {
            users: localStorage.users ? JSON.parse(localStorage.users) : [],
            id: 0,
            name: '',
            age: '',
            text: '',
            user: {id: '', name: '', age: '', text: ''}
        }
    },
    methods: {
        add() {
            if (this.name) {
                var l = this.users.length
                if (l > 0) {
                    this.id = this.users[l - 1].id
                }
                this.id++
                this.user.id = this.id
                this.user.name = this.name
                this.user.age = this.age
                this.user.text = this.text
                this.users.push(this.user)
                localStorage.users = JSON.stringify(this.users)
                this.user = {id: '', name: '', age: '', text: ''}
                this.name = ''
                this.age = ''
                this.text = ''
            }
        },
        del(index) {
            this.users.splice(index, 1)
            localStorage.users = JSON.stringify(this.users)
        },
        xq(index) {
            this.$router.push("/userxq/" + index)
        },
        dels() {
            this.users = []
            localStorage.users = JSON.stringify(this.users)
        }
    }
}
</script>

<style scoped>

</style>
